<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Generate Icons</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      max-width: 200px;
    }
    button:hover {
      background-color: #45a049;
    }
    .preview {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .instructions {
      background-color: #f9f9f9;
      padding: 15px;
      border-radius: 5px;
      border-left: 5px solid #4CAF50;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>GetCookie 插件图标生成器</h1>
    
    <div class="instructions">
      <h3>使用说明：</h3>
      <ol>
        <li>点击"生成图标"按钮</li>
        <li>预览区域将显示三种尺寸的图标</li>
        <li>点击每个图标下方的"下载"按钮保存图标</li>
        <li>将下载的图标放入插件的 images 文件夹中</li>
      </ol>
    </div>
    
    <button id="generateBtn">生成图标</button>
    
    <div class="preview" id="preview"></div>
  </div>
  
  <script>
    // SVG源码
    const svgSource = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <circle cx="64" cy="64" r="60" fill="#4CAF50"/>
    <circle cx="64" cy="64" r="50" fill="#45a049"/>
    <circle cx="45" cy="45" r="8" fill="#ffffff"/>
    <circle cx="85" cy="45" r="8" fill="#ffffff"/>
    <circle cx="45" cy="85" r="8" fill="#ffffff"/>
    <circle cx="85" cy="85" r="8" fill="#ffffff"/>
    <circle cx="65" cy="65" r="8" fill="#ffffff"/>
</svg>`;
    
    // 生成不同尺寸的图标
    function generateIcons() {
      const sizes = [16, 48, 128];
      const preview = document.getElementById('preview');
      preview.innerHTML = '';
      
      sizes.forEach(size => {
        // 创建容器
        const container = document.createElement('div');
        container.className = 'icon-container';
        
        // 创建图像
        const img = new Image();
        img.width = size;
        img.height = size;
        
        // 创建SVG Blob
        const blob = new Blob([svgSource], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);
        
        // 创建Canvas
        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext('2d');
        
        // 加载SVG到Canvas
        img.onload = function() {
          ctx.drawImage(img, 0, 0, size, size);
          URL.revokeObjectURL(url);
          
          // 显示预览
          const preview = document.createElement('img');
          preview.src = canvas.toDataURL('image/png');
          preview.width = size;
          preview.height = size;
          container.appendChild(preview);
          
          // 添加尺寸标签
          const label = document.createElement('div');
          label.textContent = `${size}x${size}`;
          container.appendChild(label);
          
          // 添加下载按钮
          const downloadBtn = document.createElement('button');
          downloadBtn.textContent = '下载';
          downloadBtn.onclick = function() {
            const link = document.createElement('a');
            link.download = `icon${size}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
          };
          container.appendChild(downloadBtn);
        };
        
        img.src = url;
        preview.appendChild(container);
      });
    }
    
    // 添加按钮事件监听器
    document.getElementById('generateBtn').addEventListener('click', generateIcons);
  </script>
</body>
</html>